 // * ========================================================================
 // * freqselector
 // * http://twostairs.com
 // * ========================================================================
 // * Copyright 2011-2014 Marius M. <marius@twostairs.com>
 // * Licensed under MIT (http://opensource.org/licenses/MIT)
 // * ========================================================================

@urlPath: "../images/freqselector/default";

@fontTitle: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
@fontSubtitle: "LatoLight", "Helvetica Neue", Helvetica, Arial, sans-serif;

.freqselector {
  height: 0px;
  opacity: 0;
  width: 100%;
  position: relative;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .freqselector-fadeout {
    width: 100px;
    height: 80px;
    position: absolute;
    z-index: 10;
  }

  .freqselector-fadeout-left {
    background: transparent url("@{urlPath}/fadeout-left.png") repeat-y top left;
    left: 0;
  }

  .freqselector-fadeout-right {
    background: transparent url("@{urlPath}/fadeout-right.png") repeat-y top left;
    right: 0;
  }

  .freqselector-arrow-top {
    background: transparent url("@{urlPath}/arrow.png") no-repeat top left;
    width: 23px;
    height: 13px;
    position: absolute;
    left: 50%;
    top: 0px;
    z-index: 11;
  }

  .freqselector-arrow-bottom {
    background: transparent url("@{urlPath}/arrow.png") no-repeat bottom left;
    width: 23px;
    height: 13px;
    position: absolute;
    left: 50%;
    bottom: 0px;
    z-index: 11;
  }

  .freqselector-background {
    height: 80px;
    width: 100%;
    background: #fff url("@{urlPath}/background.png") repeat-x top left;
    overflow: hidden;
    position: absolute;

    .freqselector-content {
      height: 80px;
      //width: 1440px;
      position: absolute;
      overflow: hidden;

      .freqselector-item {
        height: 80px;
        // line-height: 42px;
        width: 144px;
        display: block;
        background: transparent url("@{urlPath}/ruler.png") repeat-x top left;
        text-align: center;
        margin: 0px;
        padding: 0px;
        padding-top: 18px;
        float:left;

        .freqselector-item-title {
          color: #555;
          font-family: @fontTitle;
          font-weight: bold;
          font-size: 1.1em;
        }

        .freqselector-item-subtitle {
          color: #666;
          font-family: @fontSubtitle;
          font-weight: normal;
          font-size: 1.0em;
        }

        .freqselector-item-snap {
          background-color: red;
          width: 3px;
          height: 20px;
          position: relative;
          left: 50%;
          float: left;
          clear: both;
          visibility: hidden;
        }
      }

      .freqselector-item-dummy {
      }

      .freqselector-item-not-dummy {
      }

      .clear {
        clear: both;
      }
    }
  }
}
